<template>
	<view class="me_container">
		<view class="m_header">
			<image class="mh_img" src="/static/images/me/my_bg.png"></image>
		</view>
		<view class="m_box">
			<view class="mb_img" v-if="loginFlag == false">
				<image mode="scaleToFill" src="/static/images/me/header.png" class="m_img"></image>
			</view>
			<view class="mb_img" @click="jumpFixAvator" v-if="loginFlag == true">
				<image mode="scaleToFill"
					:src="imagePath == '' ? `/static/images/me/header.png` : `${imageUrl}${imagePath}`" class="m_img">
				</image>
			</view>
		</view>
		<view class="user_msg_box">
			<view v-if="loginFlag == true">
				<view class="mt_login">
					{{isCert ? String(mobileNo).replace(/(\d{3})\d{4}(\d{4})/, "$1 **** $2") : realName}}
				</view>
				<view class="mt_fix">
					{{!isCert ? String(mobileNo).replace(/(\d{3})\d{4}(\d{4})/, "$1 **** $2") : '未实名认证，请前往认证'}}
				</view>
			</view>
			<view v-else>
				<view class="mt_login">登录/注册</view>
				<view class="mt_fix">马上登录，享受更多精彩内容</view>
			</view>
			<view v-if="!loginFlag || isCert == 1" class="login_btn" @click="jumpAndRenZheng">
				<text>{{ loginFlag && isCert == 1?'去认证':'登录/注册'}}</text>
			</view>
		</view>
		<view class="fast_fn">
			<view class="fast_fn_item" v-for="(item, index) in fastFn" v-if="item.btnName !== '实名认证'" :key="index"
				@click="jumpSwitch(item.btnName)">
				<image :src="item.btnImg" class="fast_fn_icon"></image>
				<text>{{item.btnName}}</text>
			</view>
			<view class="fast_fn_item" @click="jumpSwitch('实名认证')">
				<image :src="`/static/images/me/${isCert == 1?'real_name':'realed_name'}.png`" class="fast_fn_icon">
				</image>
				<text>{{isCert == 1?'实名认证':'已实名认证'}}</text>
			</view>
		</view>
		<view class="my_box">
			<view class="my_box_box">
				<view class="my_box_top" v-for="(item, index) in btnList" :key="index"
					@click="jumpSwitch(item.btnName)">
					<view class="avatoa">
						<image :src="item.btnImg" class="imgava"></image>
						<text class="my_txt">{{item.btnName}}</text>
					</view>
					<view class="icon_right">
						<text v-if="item.btnName == '消息中心' && loginFlag && geList.length > 0 && readNum>0"
							:class="readNum.length == 2 ? 'readConts' : 'readCont'">{{readNum}}</text>
						<!-- <view> -->
						<image class="arrow_icon" src="/static/images/me/to_right_icon.png" mode="scaleToFill"></image>
						<!-- </view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- <custom-modal :isShow="showAgreement" :content="'false'" title="服务条款和隐私协议" @cancel="notAgree"
				:inp="false" @ok="agree" cancelCor="#e4393c" okBtn="同意" cancelBtn="不同意">
				<view class="user_agreement">
					欢迎使用智初小交APP。我们非常重视您的个人信息和隐私保护，在您使用“智初小交”服务之前，请您务必仔细阅读并透彻理解<text
						@click="openUserAgreement('agreement')" class="agreement">《智初小交云平台用户服务条款》</text>和<text
						@click="openUserAgreement('policy')"
						class="agreement">《隐私政策》</text>。我们将严格按照您同意的各项条款使用您的个人信息，以便为您提供更好的服务。
				</view>
			</custom-modal> -->
		<custom-modal :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()'
			:okBtn='okBtn' />
		<!-- #ifndef APP-PLUS -->
		<!-- <mc-tabbar :current-page="2"></mc-tabbar>  -->
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		queryStudentCardBalance,
		findUserByUserId,
		readCount,
		queryBindStudentQuantity
	} from '../../common/api/index.js';
	import {
		getTwoUserList,
	} from '../../common/api/blank.js';
	import {
		requestURL
	} from '../../common/utils/config.js';
	import mcTabbar from '../../components/mc-tarbar.vue';
	import customModal from '../../components/custom-modal/custom-modal.vue';
	export default {
		async onShow() {
			this.loginFlag = uni.getStorageSync('s_login')
			// console.log(this.loginFlag)
			if (this.loginFlag) {
				this._getUserInfo()
				this._queryStudentCardBalance()
				this._queryStudentCardBalance1()
				this._queryBindStudentQuantity()
			}
			// #ifdef APP-PLUS
			if (!uni.getStorageSync("s_login")) {
				console.log("先去登录")
			} else {
				let s_userId = uni.getStorageSync("s_userId");
				try {
					const res = await getTwoUserList({
						userId: s_userId
					})
					if (res.code == 0) {
						if (res.data.length > 0) {

							this.is_open_e_wallet = true
						} else {
							this.is_open_e_wallet = false
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				} catch (err) {
					uni.showToast({
						icon: "none",
						title: err
					})
				}
			}
			// this.showAgreement = false
			// const agreement = uni.getStorageSync("agreement")
			// if( agreement != "agree" ) this.showUserAgreement();
			// #endif
		},
		async onLoad() {
			// #ifdef APP-PLUS
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					console.log('运行Android上')
					this.portalCode = 'POC_APP_ANDRIOD'
					break;
				case 'ios':
					console.log('运行iOS上')
					this.portalCode = 'POC_APP_APPLE'
					break;
				default:
					console.log('运行在开发者工具上')
					break;
			}
			// #endif
		},
		components: {
			mcTabbar,
			customModal
		},
		data() {
			return {
				// showAgreement: false,
				is_open_e_wallet: false,
				loginFlag: uni.getStorageSync('s_login'),
				mobileNo: '',
				realName: '',
				certIdCardNo: '',
				imagePath: '',
				imageUrl: `${requestURL}/ecm/api/app/pic/`,
				showFlag: false,
				readNum: 0,
				isCert: 1,
				geList: [],
				userList: [],
				fastFn: [{
						btnName: '我的卡',
						btnImg: '/static/images/me/card.png'
					},
					{
						btnName: '我的积分',
						btnImg: '/static/images/me/integration.png'
					},
					{
						btnName: '实名认证',
						btnImg: '/static/images/me/real_name.png'
					}
				],
				btnList: [{
						btnName: '消息中心',
						btnImg: '/static/images/me/news.png'
					},
					// // #ifdef H5
					// { btnName: '人像采集', btnImg: '/static/images/me/portrait.png' },
					// // #endif
					// {
					// 	btnName: '学生牛奶',
					// 	btnImg: '/static/images/me/setting.png'
					// },
					{
						btnName: '账号设置',
						btnImg: '/static/images/me/setting.png'
					},
					{
						btnName: '常见问题',
						btnImg: '/static/images/me/question.png'
					},
					{
						btnName: '关于我们',
						btnImg: '/static/images/me/tel.png'
					}
				],
				showMcModal: false,
				title: '',
				content: '',
				pageUrl: '',
				okBtn: '',
				portalCode: '',
				ownQuantity: 0
			}
		},
		methods: {
			// showUserAgreement() {
			// 	this.showAgreement = true
			// },
			// notAgree(){
			// 	plus.runtime.quit()
			// },
			// agree(){
			// 	uni.setStorageSync("agreement","agree")
			// 	this.showAgreement = false
			// },
			openUserAgreement(name) {
				console.log(name)
				let url = '';
				if (name == 'agreement') { // 服务条款
					url = '/stu_side_h5/xj/user_agreement.html' + '&title=' + '用户服务条款'
				} else if (name == 'policy') { // 隐私协议
					url = '/stu_side_h5/xj/privacy_policy.html' + '&title=' + '隐私政策'
				}
				uni.navigateTo({
					url: '../login/userAgreement?url=' + url
				})
			},
			bb() {
				this.showMcModal = false
				uni.showTabBar({
					animation: true
				})
			},
			cc() {
				this.showMcModal = false
				uni.showTabBar({
					animation: true
				})
				uni.navigateTo({
					url: this.pageUrl
				})
			},
			jumpAndRenZheng() {
				if (this.loginFlag && this.isCert == 1) {
					this.jumpSwitch('实名认证')
				} else {
					this.jumpLogin()
				}
			},
			_readCount() {
				if (this.geList.length != 0) {
					readCount({
						orgId: this.geList[0].students[0].orgId,
						empId: this.geList[0].students[0].empId,
						// #ifdef MP-ALIPAY
						portalCode: 'POC_ZFB_APPLET'
						// #endif
						// #ifdef H5
						portalCode: 'POC_WX_OPENPLAFORM'
						// #endif
						// #ifdef MP-WEIXIN
						portalCode: 'POC_WX_APPLET'
						// #endif
						// #ifdef APP-PLUS
						portalCode: this.portalCode
						// #endif
					}).then(res => {
						if (res.code == 0) {
							this.readNum = res.data;
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			_queryStudentCardBalance() {
				let s_userId = uni.getStorageSync('s_userId')
				queryStudentCardBalance({
					userId: s_userId,
					queryCard: true,
					queryWallet: true
				}).then(res => {
					// console.log(res)
					if (res.code == 0) {
						this.userList = res.data.orgs
						// console.log(this.userList)
						this.showFlag = true
					} else {
						this.userList = []
						this.showFlag = false
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			_queryStudentCardBalance1() {
				let s_userId = uni.getStorageSync('s_userId')
				queryStudentCardBalance({
					userId: s_userId,
					queryCard: true,
					queryWallet: true,
					bindType: 0
				}).then(res => {
					if (res.code == 0) {
						// console.log(res.data.students)
						this.geList = res.data.students
						this._readCount()
					} else {
						this.geList = []
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			jumpFixAvator() {
				if (!this.loginFlag) {
					this._toLogin()
				} else {
					uni.navigateTo({
						url: './fixAvator?imagePath=' + this.imagePath
					})
				}
			},
			_toLogin() {
				this.title = '未登录'
				this.content = '您未登录，需要登录后才能继续'
				this.pageUrl = '../login/login'
				this.okBtn = '立即登录'
				this.showMcModal = true
			},
			jumpQuestion() {
				uni.navigateTo({
					url: '/packageA/about/question'
				})
			},
			jumpSwitch(name) {
				if (!this.loginFlag) {
					if (name == '关于我们') {
						this.jumpAbout()
					} else if (name == '常见问题') {
						this.jumpQuestion()
					} else {
						this._toLogin()
					}
				} else {
					if (name == '关于我们') {
						this.jumpAbout()
					} else if (name == '常见问题') {
						this.jumpQuestion()
					} else if (name == '实名认证') {
						this.jumpRen()
					} else if (name == '账号设置') {
						this.jumpSetting()
					} else {
						console.log(this.ownQuantity)
						if (this.ownQuantity == 0) {
							this.title = '温馨提示'
							this.content = '请先绑卡'
							this.pageUrl = '/packageCard/card/bind?toForm=guide&only=true'
							this.okBtn = '去绑卡'
							this.showMcModal = true
							uni.hideTabBar({
								animation: true
							})
						} else {
							switch (name) {
								case '消息中心':
									this.jumpInfo()
									break;
								case '我的积分':
									this.jumpPoints()
									break;
								case '我的卡':
									this.jumpDan()
									break;
							}
						}

					}

				}
			},
			jumpMilk() {
				uni.navigateTo({
					url: '/packageA/about/milkList'
				})
			},
			jumpAbout() {
				uni.navigateTo({
					url: '/packageA/about/about'
				})
			},
			jumpRen() {
				let url = '../me/renzheng';
				if (!this.isCert) {
					url += '?idCard=' + this.certIdCardNo + '&isCert=' + this.isCert + '&realName=' + this.realName
				}
				if (this.geList.length > 0) {
					url += (this.isCert ? '?' : '&') + 'user=' + JSON.stringify(this.geList[0].students[0])
				}
				uni.navigateTo({
					url: url
				})
			},
			jumpPoints() {
				uni.navigateTo({
					url: '../points/points'
				})
			},
			_getUserInfo() {
				uni.showLoading()
				let s_userId = uni.getStorageSync('s_userId')
				plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
					console.log(widgetInfo)
					findUserByUserId({
						userId: s_userId,
						version: widgetInfo.version
					}).then(res => {
						if (res.resultCode == 0) {
							this.mobileNo = res.obj.mobileNo
							this.imagePath = res.obj.imagePath
							this.isCert = res.obj.isCert
							this.realName = res.obj.userName
							this.certIdCardNo = res.obj.idCard
							uni.hideLoading()
						} else {
							uni.hideLoading()
						}
					}).catch(err => {
						console.log(err)
						uni.hideLoading()
					})
				})

			},
			_toRenZheng() {
				this.title = '温馨提示'
				this.content = '使用该功能前，请先完成实名认证！'
				this.pageUrl = '../me/renzheng'
				this.okBtn = '去认证'
				this.showMcModal = true
			},
			jumpLogin() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			jumpInfo() {
				let stulist = []
				this.geList.forEach((item) => {
					stulist.push({
						orgId: item.students[0].orgId,
						empId: item.students[0].empId
					})
				})
				uni.navigateTo({
					url: '../info/info?stulist=' + JSON.stringify(stulist)
				})
			},
			jumpDan() {
				uni.navigateTo({
					url: '/packageCard/card/dangan?bindType=0&toRedpack=1'
				})
			},
			jumpPortrait() {
				uni.navigateTo({
					url: './fixPortrait'
				})
			},
			jumpSetting() {
				uni.navigateTo({
					url: './setting?imagePath=' + this.imagePath + '&loginFlag=' + this.loginFlag +
						'&mobileNo=' +
						this.mobileNo
				})
			},
			_queryBindStudentQuantity() {
				let s_userId = uni.getStorageSync("s_userId");
				queryBindStudentQuantity({
						userId: s_userId
					})
					.then(res => {
						// console.log(res)
						if (res.code == 0) {
							this.ownQuantity = res.data.ownQuantity;
						} else {
							this.ownQuantity = 0
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
		}
	}
</script>

<style lang="scss">
	.me_container {
		height: 100vh;
		background: #f6f6f6;
		overflow: hidden;

		.m_header {
			width: 100%;
			height: 289rpx;
			background-color: #fff;

			.mh_img {
				width: 100%;
				height: 100%;
			}
		}

		.m_box {
			width: 120rpx;
			height: 120rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			overflow: hidden;
			align-items: center;
			border: 2px solid rgb(255, 255, 255);
			// padding: 10rpx;
			box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
			border-radius: 50%;
			background-color: #ffffff;
			position: absolute;
			top: 176rpx;
			left: 32rpx;

			.mb_img {
				width: 120rpx;
				height: 120rpx;
				box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.1);

				.m_img {
					height: 120rpx;
					width: 120rpx;
					margin-right: 10rpx;
				}
			}
		}

		.user_msg_box {
			background-color: #fff;
			padding: 32rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.mt_login {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #3c424f;
				line-height: 44rpx;
			}

			.mt_fix {
				font-size: 28rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #6b707a;
				line-height: 40rpx;
			}

			.login_btn {
				min-width: 200rpx;
				height: 72rpx;
				font-size: 32rpx;
				line-height: 72rpx;
				padding: 0 14px;
				text-align: center;
				color: #fff;
				background: linear-gradient(90deg, #4398ff 0%, #185aff 100%);
				box-shadow: 0px 4px 8px 0px rgba(91, 134, 249, 0.33);
				border-radius: 20px;
			}
		}

		.fast_fn {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			padding: 24rpx 0;
			background-color: #fff;

			.fast_fn_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: calc(100% / 3);
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;

				.fast_fn_icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-bottom: 12rpx;
				}
			}
		}

		.my_box {
			margin-top: 16rpx;

			.my_box_box {
				display: flex;
				flex-direction: column;

				.my_box_top {
					min-height: 106rpx;
					padding: 24rpx 32rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					background-color: #ffffff;
					position: relative;

					&::after {
						content: "";
						height: 1px;
						transform: scaleY(0.5);
						background: #e6e6e6;
						position: absolute;
						right: 0;
						bottom: 0;
						left: 32rpx;
					}

					&:last-child::after {
						height: 0;
					}

					.avatoa {
						display: flex;
						align-items: center;

						.imgava {
							width: 48rpx;
							height: 48rpx;
							margin-right: 15rpx;
						}

						.my_txt {
							font-family: PingFangSC;
							font-weight: 400;
							font-size: 30rpx;
							color: #000000;
						}
					}

					.icon_right {
						display: flex;
						flex-direction: row;
						align-items: center;

						.readConts {
							margin-right: 10rpx;
							background-color: #e02020;
							border-radius: 50%;
							padding: 5rpx;
							font-size: 24rpx;
						}

						.readCont {
							margin-right: 10rpx;
							background-color: #e02020;
							border-radius: 50%;
							color: #fff;
							width: 36rpx;
							height: 36rpx;
							font-size: 24rpx;
							font-weight: 600;
							line-height: 36rpx;
							text-align: center;
						}

						.arrow_icon {
							display: inline-block;
							width: 48rpx;
							height: 48rpx;
						}
					}
				}
			}
		}
	}


	.mytxt {
		color: rgb(199, 199, 204);
		line-height: 0;
	}

	.user_agreement {
		text-align: left;
		text-indent: 60rpx;

		.agreement {
			font-family: "PingFang-SC-Medium, PingFang-SC";
			font-weight: 500;
			color: #185AFF;
			text-decoration: blink
		}
	}
</style>